<!DOCTYPE html>

{% load staticfiles %}

<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <link rel="icon" href="data:;base64,iVBORw0KGgo="> <!-- no favicon -->

  <title>{% block title %}{% endblock %}</title>

  <link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}" type="text/css" />

  <script src="{% static "js/jquery-2.2.4.min.js" %}" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.3/js/tether.min.js" type="text/javascript"></script>
  <script src="{% static "js/bootstrap.min.js" %}" type="text/javascript"></script>
  <script src="{% static "js/reconnecting-websocket.min.js" %}" type="text/javascript"></script>

</head>

<body>


<div class="container">

    <div class="row">
        <div class="col-sm-6">
            <div id="task_runner_div" style="margin-top:50px;">
                <h2>Task Runner</h2>
                <form id="taskform">
                    <input id="task_name" type="text" placeholder="Task Name">
                    <button type="submit" id="go" class="btn btn-info">Run 3 sec task</button>
                </form>
            </div>
            <div id="task_status_div" style="margin-top:100px;">
                <h2>Task Status</h2>
                <table id="task_status" class="table">
                    <thead>
                        <tr>
                            <th>Task ID</th>
                            <th>Task Name</th>
                            <th>Task Status</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div> <!-- container -->



<script>
/*
In a real project, this javascript should probably be placed in it's own file,
but for the purposes of this demo, its kept in the same file for simplicity.
*/
$(function() {
    // When we're using HTTPS, use WSS too.
    var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
    var ws_path = ws_scheme + '://' + window.location.host + '/dashboard/';
    console.log("Connecting to " + ws_path)
    var socket = new ReconnectingWebSocket(ws_path);
    socket.onmessage = function(message) {
        console.log("Got message: " + message.data);
        var data = JSON.parse(message.data);
        // if action is started, add new item to table
        if (data.action == "started") {
            var task_status = $("#task_status");
            var ele = $('<tr></tr>');
            ele.attr("id", data.task_id);
            var item_id = $("<td></td>").text(data.task_id);
            ele.append(item_id);
            var item_name = $("<td></td>").text(data.task_title);
            ele.append(item_name);
            var item_status = $("<td></td>");
            item_status.attr("id", "item-status-"+data.task_id);
            var span = $('<span class="label label-primary"></span>').text(data.task_status);
            item_status.append(span);
            ele.append(item_status);
            task_status.append(ele);
        }
        // if action is completed, just update the status
        else if (data.action == "completed"){
            var item = $('#item-status-' + data.task_id + ' span');
            item.attr("class", "label label-success");
            item.text(data.task_status);
        }
    };
    $("#taskform").on("submit", function(event) {
        var message = {
            action: "start_sec3",
            job_name: $('#task_name').val()
        };
        socket.send(JSON.stringify(message));
        $("#task_name").val('').focus();
        return false;
    });
});
</script>



</body>
</html>